<!--
 	* @author  hemengxia
 	商品设置--选择商家进行搜索
-->
<template>
  <div class="select-goods-by-business-list">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="visible"
               title="商家列表" center
               @close="handleCancel()">
      <section class="content">
        <section class="main-table">
          <el-table
              v-if="type==1"
              :data="list"
              v-loading="listLoading"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%">
            <el-table-column prop="shopName" label="商家名称" show-overflow-tooltip/>

          </el-table>
          <el-table
              v-else-if="type ==2"
              :data="list"
              v-loading="listLoading"
              style="width: 100%">
            <el-table-column prop="shopName" label="商家名称" show-overflow-tooltip/>
            <el-table-column
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="text" @click="chooseAll(scope.row)" size="small">添加所有商品</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                      @pagination="getList"/>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryList} from './api'
import elDragDialog from '@/directive/el-drag-dialog'
import Pagination from '@/components/Pagination'
export default {
  name: "SelectGoodsByBusinessList",
  directives: {elDragDialog},
  components: {Pagination},
  data() {
    return {
      visible: true,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },

    }
  },
  props: {

    //type ==1 是通过商家名称搜索   ==2，是按商家搜索
    type: {
      type: String,
      default: '1'
    }
  },
  methods: {
    /**
     * 选择商家
     * @param val
     */
    handleCurrentChange(val) {
      this.$emit('handleSearch', val)
    },
    /**
     * 添加所有商品
     * @param row
     */
    chooseAll(row) {
      this.$emit('chooseAll', row)
    },

    rowClass({row, rowIndex}) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
      }
      return new Promise((resolve, reject) => {
        queryList(query).then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    }
  },
  created() {
    this.getList()
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/mixin.scss';

.select-goods-by-business-list {
  position: relative;

  .header-content {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .total-balance-content {
      font-weight: bold;

      .balance {
        font-size: 18px;
        @include font-color($mainColor);
      }
    }
  }

  /*  .select-goods-by-business-list-inner {
      max-height: calc(100vh - 130px);
      min-height: calc(100vh - 130px);
      position: relative;

      &::after {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
      }
    }*/
}
</style>
